<template>
  <el-dialog
    title="打印面单"
    :modal="false"
    :visible.sync="centerDialogVisible"
    width="70%"
    center
  >
    <div style="height:700px;overflow-y:auto">
      <el-row :gutter="16" style="margin-top:20px;margin-left:50px;">
        <div v-html="surfaceSingleHtml"></div>
      </el-row>
      <el-button
        type="success"
        style="margin-left:650px;"
        @click="printSurfaceSingleLabel"
        v-loading.fullscreen="fullscreenLoading"
        >打印面单 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</el-button
      >
    </div>
  </el-dialog>
</template>

<script>
import { ajax } from "@/store/yg/common/utils";
import axios from "axios";
import * as constant from "@/store/yg/common/constant";
import { m } from "@/store/yg/common/local";
import { getLodop } from "@/store/yg/common/LodopFuncs";

export default {
  props: ["row", "data", "more"],
  data() {
    return {
      fullscreenLoading: false,
      waybillId: "",
      name: "",
      surfaceSingleCode: "",
      surfaceSingleHtml: "",
      centerDialogVisible: false
    };
  },

  methods: {
    printSurfaceSingleLabel() {
      var param = {};
      param["waybillId"] = this.data["id"];
      param["surfaceSingleCode"] = this.surfaceSingleCode;
      this.fullscreenLoading = true;
      ajax("printSurfaceSingleLabel", param).then(
        res => {
          this.fullscreenLoading = false;
          console.log(res);
          if (res.code != 200) {
            if (null != res.message) {
              this.$message.error(m(res.message));
            } else {
              this.$message.error("打印失败!");
            }
          } else {
            const htmls = res.data;
            if (null == htmls || typeof htmls === "undefined") {
              return;
            }
            this.printLodop(htmls);
          }
        },
        error => {
          console.log(error);
        }
      );
    },

    printLodop(htmls) {
      let LODOP = getLodop();
      console.info(LODOP);
      LODOP.PRINT_INIT("打印面单信息");
      LODOP.SET_PRINT_PAGESIZE(1, 0, 0, "A4");
      var reg = new RegExp("mm", "g");
      for (var j = 0; j < htmls.length; j++) {
        var html = htmls[j];
        // 总共两个HTML在固定位置添加HTML内容
        if (j == 0) {
          LODOP.ADD_PRINT_HTM("0mm", "0mm", "190mm", "145mm", html);
        } else if (j == 1) {
          LODOP.ADD_PRINT_HTM("146mm", "0mm", "190mm", "145mm", html);
        }
        var body = document.querySelector("body");
        body.append(
          "<div id='templateContentHtml' style='display:none'>" +
            html +
            "</div>"
        );
        var barCodes = document.getElementsByName("barCode");
        for (var i = 0; i < barCodes.length; i++) {
          var barCode = barCodes[i];
          var value = barCode.getAttribute("value");
          var values;
          if (value.indexOf("|") >= 0) {
            values = barCode.getAttribute("value").split("|");
          } else {
            values = barCode.getAttribute("value").split("-");
          }
          var valueY = values[0];
          if (j == 1) {
            var top = values[0].replace(reg, "").trim();
            top = parseInt(top) + 145;
            valueY = top + "mm";
          }
          LODOP.ADD_PRINT_BARCODE(
            valueY,
            values[1],
            values[2],
            values[3],
            values[4],
            values[5]
          );
          LODOP.SET_PRINT_STYLEA(0, "ShowBarText", 1);
        }
        // $("#templateContentHtml").remove();
        var templateContentHtml = document.querySelector("templateContentHtml");
        this.removeDom(templateContentHtml);
      }
      LODOP.PREVIEW();
    },
    // 移除节点
    removeDom(model) {
      var self = this;
      if (self.$parent.model) {
        self.$parent.model.children.forEach((item, index) => {
          if (item.name == model.name) {
            self.$parent.model.children.splice(index, 1);
          }
        });
      }
    }
  },
  mounted() {}
};
</script>

<style></style>
